<template>
	<block>
		<view class="box">
			<view class="back">
			</view>
			<uni-steps :options="options" :active="1"></uni-steps>

			<view class="cont" style="margin-top: 30rpx;">
				<view class="head">
					<text class="textOver" style="font-size: 35rpx;">{{shopInfo.storeName}}</text>

				</view>
				<view class="line"></view>
				<view class="contBot" style="padding: 18rpx 24rpx;">
					<view class="leftImg">
						<image :src="imgapi+item.avatar" mode=""></image>
						<text v-if="!item.alone">{{item.people}}人团</text>
					</view>
					<view class="rightCont">
						<view class="textOver" style="font-size: 35rpx;">{{item.title}}</view>
						<view class="person" v-if="!item.alone">{{item.people}}人套餐</view>
						<view class="contPrice">
							<view class="price" :class="!item.alone?'':'textDesc'">
								<text v-if="item.origin">￥{{item.origin}}</text>
								<text v-else>￥{{item.originPrice}}</text>
							</view>

						</view>
					</view>
					<block v-if="item.hasSpec==1">
						<!-- 单独买且有规格 -->
						<view class="line" style="margin: 45rpx 0 30rpx;" :class="[item.alone&&item.hasSpec!=1?'':'lineAlone']"></view>
						<view class="bottom bot">
							<text class="tit">规格</text>
							<uni-tag size="small" circle type="warning" :text="item.discount"></uni-tag>
						</view>
					</block>
					<block v-if="!item.alone">
						<view class="line" style="margin: 35rpx 0 30rpx;"></view>
						<view class="bottom cot">
							<text class="tit">单价</text>
							<view class="">
								<uni-tag size="small" type="warning" text="拼团价"></uni-tag>
								<text style="color: #ff7801;">￥{{item.discountPrice}}</text>
							</view>
						</view>
					</block>
					<!-- 单独买且无规格 -->
					<view class="line" style="margin: 35rpx 0 30rpx;" :class="[item.alone&&item.hasSpec!=1?'lineAlone':'']"></view>
					<view class="bottom">
						<text class="tit">数量</text>
						<!-- 加减 -->
						<view style="text-align:right;width: 32%;">
							<numSelect model="1" @getValue="count" @addNum="add" @minusNum="minus" color="#9cd53f"
								:value="form.amount" :size="50"></numSelect>
						</view>
					</view>
				</view>
			</view>
			<view class="bulkPerson cot" v-if="!item.alone">
				<view class="head"><text>{{item.people}}</text>人成团,当前有<text>{{list.length}}</text>人参团</view>
				<view class="line" style="margin: 20rpx 0;"></view>
				<view class="img">
					<view class="imgList" v-for="val in list" :key="val.type">
						<image :src="val.avatar" mode=""></image>
						<uni-tag size="small" style="margin-left: -6rpx;" type="warning" text="开团人" v-if="val.type == 1"></uni-tag>
					</view>
					<view class="block">+</view>
				</view>
			</view>
			<view class="cont">
				<view class="head">
					<text class="textOver" style="font-size: 35rpx;">个人地址</text>
				</view>
				<view class="plotAddressBorder between  center_vertical" @tap="getaddress" style="margin-top: 0;">
					<view>
						<image src="../../static/images/home/weizhi.png" class="icon_next" mode=""></image>
						<text style="margin-left: 10rpx;font-size: 32rpx;color: #a3a3a3;">{{getAddress}}</text>
					</view>
					<view>
						<image src="../../static/images/mine/icon_next.png" class="icon_next"></image>
					</view>
				</view>
			</view>

			<view class="cont">
				<view class="head">
					<text class="textOver" style="font-size: 35rpx;">支付方式</text>
				</view>
				<view class="contBot" style="padding: 18rpx 24rpx;margin-top: -30rpx;">
					<radio-group name="pay" @change="payWay">
						<view class="plotAddressBorder between">
							<view class="center_vertical">
								<view>
									<image src="../../static/images/growVegetables/pay_icon.png" class="icon"></image>
								</view>
								<view>
									微信支付
								</view>
							</view>
							<view>
								<radio value="wechat" />
							</view>
						</view>
						<view class="plotAddressBorder between">
							<view class="center_vertical">
								<view>
									<image src="../../static/images/growVegetables/wallet_icon.png" class="icon">
									</image>
								</view>
								<view>
									余额支付
								</view>
							</view>
							<view>
								<radio value="balance" />
							</view>
						</view>
					</radio-group>
				</view>
			</view>

		</view>

		<view class="footer">
			<view class="bottomPrice">
				<view class="total">
					合计: <text>￥{{totalPrice}}</text>
				</view>
				<button @tap="subOrder" type="warn" class="btnPop">提交订单</button>
			</view>
		</view>
	</block>

</template>

<script>
	import cartcontrol from '@/components/cartcontrol.vue'
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	import hqsPopup from "@/components/hqs-popup/hqs-popup.vue"
	import numSelect from '@/pageA/uni_modules/poiuy-numSelect/numSelect.vue'
	export default {
		components: {
			cartcontrol,
			Skeleton,
			hqsPopup,
			numSelect,
		},
		data() {
			return {
				
				options: [{
						title: '参团或发起拼团'
					}, {
						title: '邀请指定人数成团'
					},
					{
						title: '线下体验物流配送'
					}, {
						title: '体验评价'
					}, {
						title: '交易完成'
					}
				],
				amount: null,
				imgapi:'',

				getAddress: '请选择您的收货地址',
				province: '',
				city: '',
				area: '',
				address: '',
				name: '',
				phone: '',

				form: {
					id: "",
					amount: 0.0,
					img: [],
					remark: "",
					payWay: ""
				},
				totalPrice: 0,

				item: {}, //详情信息
				shopInfo: {}, //商家信息
				list:[],
			}
		},
		onLoad(e) {
			this.imgapi = this.$reqConfig.URLIMAGE
			this.form.id = e.id
			this.$axios({
				url: "user/usGroupGoodsOrder/confirm",
				method: "post",
				data: {
					teamId: e.id,
				}
			}).then((res) => {
				this.list = res.result
				this.list.map(val=>{
					val.snapshot = JSON.parse(val.snapshot.replace(/\\/g,''))
				})
				this.item = JSON.parse(JSON.stringify(this.list[0].snapshot))
				this.item.people = parseInt(this.item.describe);
			})
			
			return 
			// console.log(JSON.parse(decodeURIComponent(e.item)));
			// return

			// this.product.plotAddress = detail.address
			this.item = JSON.parse(decodeURIComponent(e.item));
			this.shopInfo = JSON.parse(decodeURIComponent(e.shopInfo));
		},
		computed: {

		},
		methods: {
			payWay(e) {
				console.log(e.detail.value)
				this.form.payWay = e.detail.value
			},
			getaddress() {
				let that = this
				wx.chooseAddress({
					success(res) {
						that.province = res.provinceName
						that.city = res.cityName
						that.area = res.countyName
						that.address = res.detailInfo
						that.name = res.userName
						that.phone = res.telNumber
						that.getAddress = that.province + that.city + that.area + that.address
					}
				})
			},
			count(e) {
				this.form.amount = e
				console.log('amount', this.form.amount);
				//保留2位
				if (!this.item.alone) {

					this.totalPrice = (this.form.amount * this.item.discountPrice).toFixed(2)
				} else {
					this.totalPrice = (this.form.amount * this.item.originalPrice).toFixed(2)
				}
			},
			add(e) {
				console.log('加', e)
			},
			minus(e) {
				console.log('减', e)
			},

			subOrder() {
				if (this.form.amount == 0) {
					uni.showToast({
						title: "请输入数量",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.form.payWay) {
					uni.showToast({
						title: "请选择支付方式",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.province) {
					uni.showToast({
						title: "请选择收货地址",
						icon: 'none',
						duration: 2000
					})
					return;
				}

				uni.showLoading({
						title: "订单提交中"
					}),
					this.$axios({
						url: `user/usGroupGoodsOrder/joinGroup`,
						method: "post",
						data: {
							teamId: this.form.id,
							// type: this.type,
							count: this.form.amount,
							province: this.province,
							city: this.city,
							area: this.area,
							address: this.address,
							name: this.name,
							phone: this.phone,
							
							
							groupGoodsId: this.item.id,
							priceId: this.item.priceId,
							specId: this.item.specId || '',
						}
					}).then((res) => {
						//这里取消遮罩，然后提示订单提交成功,再然后就跳转到支付页面，支付有微信支付和余额支付两种
						uni.hideLoading()
						console.log('emm', res);
						if (res.code == 0) {
							uni.showToast({
								title: "订单提交成功",
								icon: 'none',
								duration: 2000
							})

							//成功提交执行对应操作
							if (this.form.payWay == "balance") {
								uni.showLoading({
										title: "余额支付中......"
									}),
									this.balancePay(res.result)

								return
								//半秒缓冲，等到后端状态修改完成跳转
								setTimeout(function() {
									uni.hideLoading()
									//跳转到订单列表
									uni.redirectTo({
										url: '../mine/shopOrder'
									})
								}, 600);
							} else {
								console.log("微信支付")
							}
						}
					})
			},

			// 余额支付
			balancePay(orderNum) {
				let orderNumList = []
				orderNumList.push(orderNum)
				this.$axios({
					url: `user/shopMall/balancePay`,
					method: "post",
					data: {
						orderNumList: JSON.stringify(orderNumList),
					}
				}).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: "支付成功!",
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.result,
							icon: 'none',
							duration: 2000
						})
					}

				})
			},
		}
	}
</script>

<style scoped>
	.imgList{
		display: flex;
		    flex-direction: column;
	}
	.img{
		display: flex;
		height: 120rpx;
	}
	.lineAlone {
		margin-top: 90rpx !important;
	}

	.textDesc {
		text-decoration: none !important;
	}

	.icon_next {
		width: 30rpx;
		height: 30rpx;
		margin-top: 7rpx;
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.plotAddressBorder {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 0.5rpx solid #eeeeee;
		padding: 18rpx 24rpx;
	}

	.btnPop {
		border-radius: 100rpx;
		background-color: #86cc14;
		padding: 0rpx 100rpx;
		margin-right: 0;
		height: 85rpx;
		line-height: 85rpx;
	}

	.footer {
		width: 92%;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		height: 100rpx;
		padding: 0 30rpx;
		line-height: 100rpx;
	}

	.bot /deep/.uni-tag--warning {
		color: #93d22e !important;
		background-color: #f5ffe6 !important;
		border-color: #b8e176 !important;
	}

	.cot /deep/.uni-tag--warning {
		background-color: #86cc14 !important;
		border-color: #86cc14 !important;
	}

	.cot /deep/.uni-tag-text--small {
		font-size: 10px !important;
		vertical-align: middle !important;
		padding: 0 5rpx !important;
		margin-right: 5rpx;
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bottom .tit {
		font-size: 32rpx;
		font-weight: bold;
	}

	/deep/.uni-steps__row-title {
		color: #fff !important;
		font-size: 28rpx;
	}

	/deep/.uni-icons {
		color: #fff !important;
	}

	/deep/.uni-steps__row-line {
		background-color: #fff !important;
	}

	/deep/.uni-steps__row-circle {
		background-color: #fff !important;
	}

	.box {
		padding: 30rpx;
		padding-bottom: 100rpx;
	}

	.back {
		position: absolute;
		z-index: -1;
		background-color: #86cc14;
		height: 450rpx;
		width: 100%;
		top: 0;
		left: 0;
		border-radius: 0 0 235rpx 116rpx;
	}

	.cont {
		background-color: #FFFFFE;
		border-radius: 25rpx;
		overflow: hidden;
		margin-bottom: 30rpx;

	}

	.cont .head {
		padding: 18rpx 24rpx;
		font-weight: 700;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cont .head text {
		font-weight: normal;
		font-size: 30rpx;
		color: #999999;
	}

	.cont .head .right {
		font-size: 30rpx;
		font-weight: normal;
	}

	.cont .head image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
	}

	.line {
		height: 3rpx;
		background-color: #eee;
	}

	.cont .contBot {
		padding: 0 30rpx;
	}

	.contBot .leftImg {
		width: 150rpx;
		height: 150rpx;
		border-radius: 15rpx;
		overflow: hidden;
		position: absolute;
		border: 2rpx solid #eee;
	}

	.contBot .leftImg image {
		width: 100%;
		height: 100%;
	}

	.contBot .leftImg text {
		display: inline-block;
		color: #FFFFFE;
		background-color: #86cc14;
		position: absolute;
		top: -2px;
		left: 0px;
		font-size: 25rpx;
		padding: 0rpx 10rpx;
	}


	.contBot .rightCont {
		margin-left: 175rpx;
	}

	.contBot .rightCont .person {
		color: #aaaaaa;
		font-size: 30rpx;
		margin-bottom: 8rpx;
	}

	.contBot .rightCont .contPrice {}

	.rightCont .contPrice .price {
		font-size: 25rpx;
		text-decoration: line-through;
		display: inline-block;
		color: #ff7800;
	}

	.rightCont .contPrice .price text {
		font-weight: bold;
		font-size: 38rpx;
		margin-right: 10rpx;
	}

	.rightCont .contPrice .bulkPrice {
		font-size: 26rpx;
		background: #86cc14;
		color: #fff;
		text-align: center;
		border-radius: 15rpx;
		width: 170rpx;
		display: inline-block;
		margin-left: 15rpx;
		padding: 5rpx 0;
	}

	.num {
		float: right;
		margin-top: -34rpx;
		color: #cccccc;
		font-size: 30rpx;
	}

	.rightCont .contPrice .bulkPrice text {
		font-size: 40rpx;
		font-weight: bold;
	}

	.bottomPrice {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.total {
		font-size: 36rpx;
	}

	.total text {
		color: #ff7800;
		font-weight: bold;
		margin-left: 5rpx;
	}



	.bulkPerson {
		background: #fff;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx
	}

	.bulkPerson .head {
		font-size: 35rpx;
		font-weight: bold;
	}

	.bulkPerson .head text {
		color: #87cc16;
	}

	.detailsBoxRight {
		width: 25%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.bulkPerson image {
		width: 70rpx;
		height: 70rpx;
		margin-right: 25rpx;
		vertical-align: bottom;
		border: 2rpx solid #eee;
		border-radius: 50%;
	}

	.top {
		text-align: center;
		font-size: 30rpx;
		background: #f5ffe6;
		margin-bottom: 35rpx;
		height: 90rpx;
		line-height: 90rpx;
		color: #86cc14;
		border-radius: 30rpx;
	}

	.block {
		display: inline-block;
		width: 70rpx;
		height: 70rpx;
		color: #cccccc;
		background: #eeeeee;
		text-align: center;
		line-height: 70rpx;
		border-radius: 50%;
		border: 2rpx dashed;
		box-sizing: border-box;
	}

	.left-content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.left-content .text {
		font-size: 30rpx;
		color: #a3a3a3;
	}

	.left-content text {
		display: inline-block;
		vertical-align: top;
		width: 85%;
		margin-left: 10rpx;
	}

	input {
		font-size: 30rpx;
		font-weight: normal;
		width: 200rpx;
	}
</style>
